<template>
	<view class="m-tabbar">
		<block v-for="(tab, i) in tabs" :key="tab.id">
			<view class="m-tabbar-item" :class="tab.selected ? 'active' : ''" @click="link(tab)">
				<view class="m-tabbar-item-icon">
					<image :src="tab.selected ? tab.selectedIconPath : tab.iconPath"></image>
				</view>
				<view class="m-tabbar-item-text">{{ tab.text }}</view>
			</view>
		</block>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		data() {
			return {};
		},
		computed: mapState({
			activeId: 'activeId',
			tabs: 'tabs',
			wechatInfo: 'wechatInfo'
		}),
		created() {
			uni.hideHomeButton();
		},
		mounted() {
			this.getInfo()
		},
		methods: {
			getInfo() {
				const self = this;
				uniCloud.callFunction({
					name: 'saveWechatInfo',
					data: {
						get: true,
						manage: self.wechatInfo
					}
				}).then(({ result }) => {
					console.log(result)
					self.$store.commit('wechatInfo', result.data[0])
					if (result.data[0].role == 1 || result.data[0].role == 2) {
						self.$store.commit('addTab')
					} else {
						self.$store.commit('delTab')
						this.link(this.tabs[0])
					}
				}).catch(e => {
					console.log(e)
				});
			},
			link(tab) {
				this.$store.commit('setActiveId', tab.id);
				const nTabs = [...this.tabs];
				nTabs.forEach(item => {
					if (item.id == tab.id) {
						item.selected = true;
					} else {
						item.selected = false;
					}
				});
				this.$store.commit('setTabs', nTabs);
				this.$emit('tabClick', tab.id);
			}
		}
	};
</script>

<style lang="less">
	@import 'm-tabbar';
</style>
